import React, { useState, useEffect } from 'react';
import request from '../../../http';
import { Input } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import '../work/correct.css';
// 冯小建--作业审批页

// 表单布局
const formItemLayout = {
  labelCol: {
    // xs: { span: 24 },
    // sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

//顶部选择按钮初始状态
const btnStatus = [1, 0];

const Correct = () => {
  const columns = [
    {
      title: '提交时间',
      dataIndex: 'releaseDateTime',
      width: 140,
    },
    {
      title: '项目名称',
      dataIndex: 'courseName',
      width: 120,
    },
    {
      title: '作业主题',
      dataIndex: 'workTheme',
      width: 90,
    },
    {
      title: '作业类型',
      dataIndex: 'type',
      width: 90,
    },
    {
      title: '实训老师',
      dataIndex: 'teacherName',
      width: 90,
    },
    {
      title: '发布时间',
      dataIndex: 'submitTime',
      width: 140,
    },
    {
      title: '计划完成时间',
      dataIndex: 'completionDateTime',
      width: 140,
    },
    {
      title: '院系',
      dataIndex: 'dkey',
      width: 90,
    },
    {
      title: '专业',
      dataIndex: 'gkey',
      width: 90,
    },
    {
      title: '小组',
      dataIndex: 'projectGrupName',
      width: 90,
    },
    {
      title: '学号',
      dataIndex: 'account',
      width: 90,
      fixed: 'right',
    },
    {
      title: '姓名',
      dataIndex: 'userName',
      width: 80,
      fixed: 'right',
    },
    {
      title: '操作',
      key: 'operation',
      dataIndex: 'statuType',
      fixed: 'right',
      width: 120,
      render: (text, record) =>
        statuType === 0 ? (
          <Space size="middle">
            <a
              onClick={() => {
                history.push({
                  pathname: '/teacher/work/approval',
                  query: {
                    submitId: record.submitId,
                    statuType: record.statuType,
                  },
                });
              }}
            >
              批复
            </a>
          </Space>
        ) : (
          <Space size="middle">
            <a>详情</a>
          </Space>
        ),
    },
  ];
  // 表单
  const [form] = Form.useForm();
  // 表单查询提交
  const startFormData = {
    annex_id: 0,
    completion_time: '',
    course_id: 0,
    p_g_id: '',
    release_time: '',
    s_id: '',
    submitTime: '',
    teacherId: '',
    type: 0,
    work_content: '',
    work_theme: '',
  };
  const [submitForm, setSubmitForm] = useState(startFormData);
  // 表单初始查询值
  const [teacherList, setTeacher] = useState<any>([]); //实训老师
  const [teacherAppovalList, setTeacherAppovalList] = useState<any>([]); //责任老师
  const [projectName, setProjectName] = useState<any>([]); //项目名
  const [grouptName, setGrouptName] = useState<any>([]); //小组名
  const [workType, setWorkType] = useState<any>([]); //作业类型

  // 链接查询
  const [courseId, setCourseId] = useState();

  //表格
  const [tableData, setTableData] = useState([]);
  // 表格页码
  const [sum, setSum] = useState(0); //表格数据总条数
  const [page, setPage] = useState(1); //页码
  const [sumPage, setSumPage] = useState(1); //总页数
  const [number, setNumber] = useState(10); //每页数量
  const [paginationData, setPaginationData] = useState();
  // 表格页码
  const pagination = {
    simple: false,
    current: page,
    total: sum,
    pageSizeOptions: ['10', '20', '30'],
    showSizeChanger: true,
    pageSize: number,
    showTotal: (count = sum) => {
      return '共' + count + '条数据';
    },
    onChange: (page, pageSize) => {
      console.log(page, pageSize);
      setPage(page);
      setNumber(pageSize);
      getTableInfo(statuType);
    },
    onShowSizeChange: (pageSize) => {
      setNumber(pageSize);
      getTableInfo(statuType);
    },
  };

  const [statuType, setStatuType] = useState(0);
  // 顶部选择按钮
  const [btnStyle, setBtnStyle] = useState(btnStatus);

  // 获取表单初始查询值接口
  const getFormInfo = () => {
    console.log('执行-获取表单初始查询值接口-getFormInfo');
    // 查询实训老师
    request
      .post('/common/a_t_s/queryTrainingTeacherNames')
      .then((response) => {
        console.log(response);
        // 判断
        if (response.code === 20000) {
          // 成功
          // console.log(response.data);
          setTeacher(response.data); //设置老师值
        } else {
          alert(response.message);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    // 查询责任老师
    request
      .post('/common/a_t_s/queryResponsibilityName')
      .then((response) => {
        console.log(response);
        // 判断
        if (response.code === 20000) {
          // 成功
          // console.log(response.data);
          setTeacherAppovalList(response.data); //设置老师值
        } else {
          alert(response.message);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    // 查询项目名
    request
      .post('/homework/teacher/selectCourse_DropDownBox')
      .then((response) => {
        console.log(response);
        // 判断
        if (response.code === 20000) {
          // 成功
          // console.log(response.data);
          setProjectName(response.data); //设置项目名值
        } else {
          alert(response.message);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const getGroupNames = () => {
    // 查询小组名
    request
      .post('/homework/teacher/selectGroup_DropDownBox', {
        course_id: courseId,
      })
      .then((response) => {
        console.log(response);
        // 判断
        if (response.code === 20000) {
          console.log('小组名');
          setGrouptName(response.data); //设置小组
        } else {
          alert(response.message);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 选择项目
  const changeCourse = (course_id) => {
    console.log(course_id);
    setCourseId(course_id);
    getGroupNames();
  };

  //获取初始表格值接口
  const getTableInfo = (type) => {
    console.log(number, page);
    // 待批复
    if (type === 0) {
      console.log('执行-获取表格值接口-待批复-getTableInfo');
      request
        .post('/homework/teacher/selectHomework_PendingApproval', {
          number: number,
          page: page,
          ...submitForm,
        })
        .then((response) => {
          console.log(response);
          // 判断
          if (response.code === 20000) {
            // 成功
            console.log('待批复', response.data);
            setTableData(response.data.returnDate); //设置表格值
            const paginationData = response.data.paginationData;
            setPaginationData(paginationData); //设置页码信息
            setNumber(paginationData.number);
            setSum(paginationData.sum);
            setPage(paginationData.currentPage);
            setSumPage(paginationData.sumPage);
            // 修改作业完成状态显示
          } else {
            alert(response.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
    // 已批复
    if (type === 1) {
      console.log('执行-获取表格值接口-已批复-getTableInfo');
      request
        .post('/homework/teacher/selectHomework_HasBeenApproved', {
          number: number,
          page: page,
          ...submitForm,
        })
        .then((response) => {
          console.log(response);
          // 判断
          if (response.code === 20000) {
            // 成功
            console.log(response.data);
            setTableData(response.data.returnDate); //设置表格值
            const paginationData = response.data.paginationData;
            setPaginationData(paginationData); //设置页码信息
            setNumber(paginationData.number);
            setSum(paginationData.sum);
            setPage(paginationData.currentPage);
            setSumPage(paginationData.sumPage);
            // 修改作业完成状态显示
          } else {
            alert(response.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    setSubmitForm({
      annex_id: 0,
      completion_time: '',
      course_id: 0,
      p_g_id: '',
      release_time: '',
      s_id: '',
      submitTime: '',
      teacherId: '',
      type: 0,
      work_content: '',
      work_theme: '',
    });
  };

  // 查询改变
  const doChangeTableData = () => {
    getTableInfo(statuType);
  };

  // 查询
  const onFinish = (fieldsValue: any) => {
    const release_time = fieldsValue['release_time']
      ? fieldsValue['release_time'].format('YYYY-MM-DD 00:00:00')
      : '';
    const completion_time = fieldsValue['completion_time']
      ? fieldsValue['completion_time'].format('YYYY-MM-DD 00:00:00')
      : '';
    const submitTime = fieldsValue['submitTime']
      ? fieldsValue['submitTime'].format('YYYY-MM-DD 00:00:00')
      : '';
    const values = {
      // ...fieldsValue,
      release_time: release_time,
      completion_time: completion_time,
      submitTime: submitTime,
      p_g_id: fieldsValue['p_g_id'] || '',
      s_id: fieldsValue['s_id'] ? fieldsValue['s_id'].toString() : '',
      course_id: fieldsValue['course_id'] || 0,
      teacherId: fieldsValue['teacherId']
        ? fieldsValue['teacherId'].toString()
        : '',
      work_theme: fieldsValue['work_theme'] || '',
      type: fieldsValue['type'] || 0,
    };
    setSubmitForm(values);
    console.log('Received values of form: ', fieldsValue, values);
    // 调用查询接口
    doChangeTableData();
  };

  // 重置
  const onReset = () => {
    form.resetFields();
  };

  // 顶部状态选择变化
  const changeTableInfo = (type) => {
    switch (type) {
      case 0:
        setBtnStyle([1, 0]);
        setStatuType(0);
        getTableInfo(0);
        break;
      case 1:
        setBtnStyle([0, 1]);
        setStatuType(1);
        getTableInfo(1);
        break;
    }
  };

  //页面加载
  useEffect(() => {
    // 获取初始查询值
    getFormInfo();
    getTableInfo(0);
  }, []);

  return (
    <div>
      {/* 顶部选择按钮 */}
      <div className="btn-box">
        <Button
          className={btnStyle[0] === 1 ? 'isPointed' : 'noPointed'}
          onClick={changeTableInfo.bind(this, 0)}
          size="large"
        >
          待批复
        </Button>
        <Button
          className={btnStyle[1] === 1 ? 'isPointed' : 'noPointed'}
          onClick={changeTableInfo.bind(this, 1)}
          size="large"
        >
          已批复
        </Button>
      </div>

      {/* 表单 */}
      <Form
        form={form}
        name="time_related_controls"
        className="absence-form my-form"
        layout="inline"
        onFinish={onFinish}
      >
        <Form.Item className="form-item" name="release_time" label="提交时间">
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item className="form-item" name="work_theme" label="作业主题">
          <Input placeholder="请录入" />
        </Form.Item>

        <Form.Item className="form-item" name="course_id" label="项目名称">
          <Select
            className="sel"
            size="middle"
            placeholder="请选择"
            onChange={changeCourse.bind(this)}
          >
            {projectName.map((item: any, i: number) => {
              return (
                <Option value={item.id} key={i}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item className="form-item" name="submitTime" label="发布时间">
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item className="form-item" name="p_g_id" label="选择小组">
          <Select className="sel" size="middle" placeholder="请先选择项目名">
            {grouptName.map((item: any, i: number) => {
              return (
                <Option value={item.id} key={i}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item
          className="form-item"
          name="completion_time"
          label="计划完成时间"
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item className="form-item" name="teacherId" label="实训老师">
          <Select className="sel" size="middle" placeholder="请选择">
            {teacherList.map((item: any, i: number) => {
              return (
                <Option value={item.id} key={i}>
                  {item.format}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item className="form-item" name="projectName" label="学生姓名">
          <Input placeholder="请录入" />
        </Form.Item>

        <Form.Item
          className="form-item"
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 8 },
          }}
        >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className="reset" htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>

      {/* 表格 */}
      <Table
        columns={columns}
        dataSource={tableData}
        scroll={{ x: 1200, y: 300 }}
        pagination={pagination}
      />
    </div>
  );
};
export default Correct;
